<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_页面固定广告条</title>
    <style>
        .top {
            background-color: #00a1d6;
            height: 120px;
            font-size: 30px;
            color: white;
            position:fixed;
            width: 100vw;
            top: 0;
        }
        .left, .right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #ffd400;
            left: 20px;
        }
        .right{
            background-color: burlywood;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧部的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque et excepturi maxime nulla perspiciatis
        repellendus sit veniam. At dolorum facere illo illum necessitatibus nesciunt rerum? Ad consequatur dolore ea
        fugiat!
    </div>
    <div>At, harum laboriosam maxime nihil nisi sint voluptates? Accusamus dignissimos eius eligendi esse, ex fuga harum
        illum, necessitatibus nobis nulla praesentium quam quas rem sapiente sequi tempora vel vero vitae.
    </div>
    <div>Assumenda blanditiis ducimus harum illum labore libero mollitia optio placeat? Aliquam amet consequatur
        cupiditate debitis eum excepturi incidunt ipsum maxime nam necessitatibus neque nostrum obcaecati officiis,
        omnis quia quod, voluptatem!
    </div>
    <div>Accusantium aliquam corporis culpa debitis dolorum eveniet expedita harum ipsa iusto laboriosam libero magni
        maxime minima natus neque nihil nisi praesentium provident, quae qui quisquam repudiandae sequi sit tempore
        unde.
    </div>
    <div>Amet assumenda at dignissimos dolorem eaque eius fuga, fugiat harum incidunt placeat porro similique, soluta.
        Accusamus alias corporis eaque, eius et ex id illum ipsam omnis quam quia reprehenderit voluptatum?
    </div>
    <div>Ab alias aspernatur ex expedita hic maxime neque non similique temporibus! Aliquid architecto autem deleniti
        est eveniet exercitationem hic laboriosam maiores maxime, tenetur. Debitis, doloribus id inventore ipsam libero
        sequi.
    </div>
    <div>Accusantium aliquid aperiam blanditiis deleniti deserunt ducimus est exercitationem illum ipsa ipsum itaque,
        maiores, minus modi non possimus praesentium quisquam repudiandae sequi tempore unde. Aliquam animi eaque esse
        magni officiis!
    </div>
    <div>Consequatur dicta dolore ea fuga id ipsum labore libero maiores pariatur perspiciatis, praesentium quasi quia
        quis tempora velit? Debitis fugiat id, magnam minus nemo officiis omnis possimus recusandae soluta tempore!
    </div>
    <div>Alias assumenda aut beatae corporis culpa cum dicta doloremque esse harum incidunt laborum, laudantium maxime
        minus molestiae molestias, mollitia nihil nisi obcaecati omnis praesentium quae ratione repellendus tempora
        veniam voluptate.
    </div>
    <div>Atque laboriosam minus odio quam rem, soluta tenetur! A accusamus aspernatur deserunt dicta doloremque enim
        eveniet ex explicabo ipsa iste minima minus, odit pariatur quis, quo tempore, veritatis? Eum, quas?
    </div>
    <div>Dolorum, facere nulla. Doloremque ea excepturi hic laudantium modi, molestias quisquam! At eaque id libero
        magnam nisi quaerat quis sequi. Accusantium debitis error laboriosam laborum, magni nihil quidem ullam vel.
    </div>
    <div>A aliquid, amet animi, architecto assumenda blanditiis consectetur consequuntur doloribus, ex exercitationem
        expedita facilis inventore ipsam itaque minima mollitia pariatur porro quaerat quasi quos ratione sit sunt
        suscipit totam voluptate!
    </div>
    <div>A accusamus accusantium ad, blanditiis eligendi expedita ipsam maxime nihil numquam obcaecati pariatur
        praesentium quaerat repudiandae soluta unde ut veritatis! Corporis laboriosam magni nesciunt nihil odio omnis
        ratione rerum velit?
    </div>
    <div>Ab ducimus eum inventore ipsum omnis quasi, quos ut. Adipisci architecto at beatae commodi consequatur dicta
        eligendi excepturi expedita inventore magni maxime nesciunt quo sed sunt, tempora totam veniam vitae.
    </div>
    <div>Aspernatur dolores nihil placeat quam quasi voluptatem voluptatibus. Consequatur eum id nihil numquam placeat
        suscipit veritatis. At atque blanditiis et ipsum maxime minima molestiae quaerat quisquam, quod sunt tenetur
        voluptates.
    </div>
    <div>Dolorem dolorum eligendi eveniet, natus porro quam repudiandae voluptatem voluptatum? Placeat, provident, quis!
        A animi architecto aspernatur consectetur eos error labore maiores, obcaecati odio officia placeat, quae
        temporibus vel, voluptatibus!
    </div>
    <div>Cumque dolor enim impedit iste laboriosam magni nemo obcaecati quae? Assumenda, corporis debitis deleniti
        eligendi esse explicabo, facilis ipsa iste nostrum odit officiis perspiciatis quas, quidem quis sint tempore
        voluptate.
    </div>
    <div>Alias aliquam, deleniti dolores et expedita nisi perferendis reprehenderit tempora. Deserunt minus natus nobis
        porro quasi? Commodi deleniti, error non officiis pariatur reprehenderit voluptatibus. A assumenda deserunt
        exercitationem facere veritatis.
    </div>
    <div>Accusantium architecto beatae culpa debitis deserunt dicta ducimus facere, hic, illum odit repudiandae saepe,
        tempora temporibus? Aperiam asperiores ipsa ipsam magni molestias quae repellat? Adipisci deserunt dolore
        perferendis qui vitae.
    </div>
    <div>Ad deserunt esse illo labore minus, quia quisquam soluta unde. Atque distinctio ducimus ea explicabo illum
        libero magni nesciunt obcaecati, placeat quam qui rem repellat velit veniam, vero voluptas voluptatum.
    </div>
    <div>A amet animi commodi eum facilis minus modi nemo totam! Dicta dignissimos eaque eligendi excepturi, magnam
        nobis quae quod recusandae repudiandae rerum vero voluptatem voluptatibus. Deleniti explicabo iusto libero
        placeat.
    </div>
    <div>Accusamus ad adipisci aliquid amet asperiores atque cumque cupiditate delectus eius eligendi exercitationem
        expedita explicabo facilis hic illo ipsa laboriosam magni nihil, nulla perferendis quae quis quo saepe tenetur
        unde.
    </div>
    <div>Aspernatur cumque debitis ea fugit harum illo ipsam minus omnis reiciendis vel. Ex, itaque magni. Ad commodi
        dolorem harum id iste labore magnam quam quo suscipit tempora. Culpa doloremque, vitae?
    </div>
    <div>Architecto assumenda at beatae consectetur cumque dicta dolorum eos, est eum expedita fugit itaque magnam
        maxime minus molestiae nisi possimus quasi qui ratione recusandae rem temporibus voluptatibus. Aspernatur, nihil
        sed!
    </div>
    <div>Accusamus aperiam beatae delectus, doloremque dolorum error illum ipsum laborum minus natus numquam praesentium
        quia quis quisquam ratione saepe ullam unde! Ad cupiditate eveniet quas, quo rerum ut vero vitae?
    </div>
    <div>Aliquam corporis, eius eum exercitationem hic illo ipsam ipsum nam necessitatibus, neque nisi perspiciatis quo
        reiciendis tempora, unde veniam voluptate! Eos facere, ipsa quae quasi qui quo sunt suscipit vero!
    </div>
    <div>Ab accusantium architecto aspernatur beatae, distinctio dolorem est ex excepturi exercitationem id incidunt
        ipsam laudantium numquam odio possimus praesentium provident quos repudiandae saepe sed sit vel velit! Ducimus,
        est, et?
    </div>
    <div>Accusantium asperiores enim id illum ullam! Aperiam, delectus dolorem facere iusto labore odio quaerat
        reprehenderit? Adipisci aliquid architecto consequatur deleniti fugit inventore, odit placeat provident qui,
        quos suscipit, tenetur voluptatibus?
    </div>
    <div>Assumenda delectus eveniet, exercitationem fuga fugiat iure maiores, minima nulla qui quod rerum, saepe
        veritatis voluptas. Consequatur, dolore eaque et nam natus necessitatibus nostrum perspiciatis praesentium quia
        quidem quisquam totam.
    </div>
    <div>Aspernatur at dolor dolorum ea eius eligendi, error explicabo id laboriosam nesciunt nulla numquam odit,
        pariatur perferendis quia reprehenderit similique temporibus ut velit voluptates! Aspernatur facere illum
        possimus tempora voluptas!
    </div>
    <div>Mollitia neque saepe voluptate. Deserunt fuga laboriosam mollitia necessitatibus numquam voluptatem. Expedita
        illo nam nulla quo repellat! Accusantium, assumenda ducimus ea eaque earum et eveniet pariatur sequi! Eaque
        explicabo, omnis.
    </div>
    <div>Asperiores assumenda atque blanditiis consequuntur illum molestiae, nam ratione reiciendis sapiente sed sequi
        ullam unde ut, vel voluptatibus. Ad consequatur eos et in nam odit praesentium sapiente tempora. Dolorum,
        repellat.
    </div>
    <div>A at deserunt dolor dolorem fugiat iste necessitatibus porro reprehenderit similique vero. Et, fugiat molestias
        neque nihil qui sed sequi? Laudantium quos, vero. Delectus eligendi nam nesciunt sed sequi, vitae!
    </div>
    <div>Adipisci error laudantium libero mollitia quidem sequi sit veritatis. Accusantium beatae ea excepturi,
        inventore ipsum iste nulla quaerat reprehenderit repudiandae voluptatum. Accusantium aliquid commodi consequatur
        libero neque odio perferendis voluptatum!
    </div>
    <div>Accusantium cum error, hic in libero nihil quaerat quo quos reiciendis sequi! Autem explicabo impedit labore
        nobis odit officiis omnis possimus sapiente sit, vel! Dolorum iure iusto maxime nemo neque!
    </div>
    <div>Adipisci architecto ex illum labore nam nostrum quas saepe veritatis! A, cum et ipsam libero nulla perferendis
        quas quo sed totam vitae. Consectetur ea hic illum incidunt modi veritatis voluptate.
    </div>
    <div>Ad amet aspernatur culpa deserunt, doloremque excepturi expedita harum inventore officiis optio provident quo
        ratione recusandae repellat saepe veniam voluptates! Cumque dolorum eligendi exercitationem incidunt molestias
        neque nostrum praesentium repellat?
    </div>
    <div>Consequuntur dignissimos dolor facilis, fuga fugiat fugit illo in molestiae nobis officia recusandae suscipit
        totam veniam! Nisi reprehenderit sapiente veritatis voluptatem? Consequuntur corporis facilis, illo inventore
        placeat quam sapiente tenetur.
    </div>
    <div>Consequatur delectus deleniti dicta distinctio dolorem ea esse et explicabo illo illum ipsam laudantium minima
        mollitia nihil non optio pariatur quae quas repellat reprehenderit tempora, veritatis voluptas. Accusantium,
        vel, voluptatibus!
    </div>
    <div>Accusamus ad aspernatur assumenda debitis dolorem expedita fugiat id ipsa ipsam itaque minus nemo neque nihil
        nisi nobis, officiis quam quia quidem quisquam quo recusandae tempore tenetur veniam voluptatem voluptatibus.
    </div>
    <div>Aliquid aperiam consequatur corporis cumque delectus eius eveniet ex illum inventore ipsam, natus odio quis quo
        sit ullam vel veniam. Asperiores commodi dicta eius explicabo libero molestias nihil nostrum saepe?
    </div>
    <div>Accusamus debitis facere ipsum odio ratione sunt ullam voluptas voluptate. Consequatur consequuntur corporis
        deleniti dolore eligendi, fugiat incidunt laboriosam maxime natus officiis praesentium quas quasi quos,
        recusandae reprehenderit, rerum veritatis!
    </div>
    <div>Accusantium, ad commodi facere fugit, molestias necessitatibus numquam quaerat recusandae repellat sit totam
        veritatis voluptatem. Animi consectetur, culpa eum ex inventore ipsum laborum maxime natus nesciunt quis
        repudiandae similique vero!
    </div>
    <div>Aliquid asperiores atque corporis error excepturi facere, labore laudantium maiores natus officia pariatur
        praesentium quaerat quisquam repellendus repudiandae saepe sed totam! Aliquam delectus odit officia quam quas
        sed similique vel.
    </div>
    <div>Dolorum enim natus nemo officiis placeat quas sit ullam veniam! Accusantium amet consequatur deserunt
        dignissimos dolorum facere fuga libero, magni maxime nobis non numquam odit praesentium quam sit ut velit.
    </div>
    <div>A accusamus animi assumenda consequuntur earum excepturi, illum iure, maiores molestiae nemo non numquam odio
        odit praesentium quis repellat repudiandae sed suscipit vel voluptas. Consequatur labore minus molestias
        provident repellat.
    </div>
    <div>Commodi consectetur dicta dignissimos eligendi, error esse est fuga fugit inventore ipsum iure magni nemo, nisi
        odio provident quos ratione sunt vitae. Atque cumque fuga illo necessitatibus provident quo tenetur.
    </div>
    <div>Ab ad amet assumenda debitis deserunt doloremque ea eaque eligendi esse fugit harum, illo illum ipsa iusto
        minus molestiae nisi non nostrum odio odit perferendis quisquam, repellat soluta sunt velit.
    </div>
    <div>Amet, animi aperiam architecto at atque culpa debitis dignissimos distinctio dolorem est hic in inventore
        maxime natus, nihil nisi nostrum numquam officiis quisquam quo rem saepe sed tenetur ullam voluptas.
    </div>
    <div>Amet architecto at blanditiis delectus dolor doloribus earum eveniet explicabo illum ipsam libero magni
        molestiae necessitatibus nemo numquam porro qui repellendus sapiente similique sint temporibus tenetur ut
        veritatis vitae, voluptatibus?
    </div>
    <div>A architecto dolore id optio placeat sequi sint soluta suscipit voluptatibus. Consequatur cupiditate
        dignissimos ducimus nemo saepe voluptatum! Aperiam assumenda aut consequatur ea modi nemo odio placeat quidem
        tempora vitae?
    </div>
    <div>Animi architecto assumenda corporis cum cumque deleniti deserunt dicta doloremque ducimus, ea eum eveniet
        exercitationem illum, impedit laborum libero modi odio optio quaerat rem rerum sed similique tempore unde velit.
    </div>
    <div>Aliquam architecto aspernatur corporis cumque cupiditate dicta dolore doloremque facilis id iusto perspiciatis
        possimus quia quis recusandae, repellat repudiandae similique soluta totam velit voluptates! Accusamus ad
        aperiam at optio perspiciatis.
    </div>
    <div>Aspernatur consequatur delectus dolorum ea eius excepturi exercitationem laudantium libero modi, pariatur
        repellendus reprehenderit repudiandae saepe vel veritatis. Ducimus enim id illum iusto magni praesentium quae
        reprehenderit, ut voluptatem voluptates!
    </div>
    <div>Ab accusamus accusantium alias animi assumenda at culpa deserunt dignissimos, distinctio dolor doloremque enim
        esse exercitationem illum iste itaque modi nisi porro quis recusandae repudiandae sed sunt totam ut voluptatum?
    </div>
    <div>Assumenda est iure reprehenderit? Ab aperiam earum eos impedit ipsa ipsam minus sit veniam veritatis! A
        accusamus ad asperiores cum, dicta earum in laborum nam nostrum, tempore velit voluptate voluptates.
    </div>
    <div>Atque corporis culpa, dolore ea eveniet exercitationem fugit itaque laborum necessitatibus non quo sit totam
        voluptas. Aperiam aut harum laborum necessitatibus repudiandae. A corporis dignissimos ex, fugiat in perferendis
        voluptatibus?
    </div>
    <div>Beatae, est, suscipit? Alias assumenda aut corporis culpa delectus dicta dolor dolorum eius error et expedita
        fugiat id ipsam iste itaque nihil nulla optio placeat, quam reiciendis, saepe sapiente voluptatem.
    </div>
    <div>A adipisci cum eaque eveniet fuga incidunt, ipsa ipsam iste laborum laudantium, minus non odio porro
        repellendus tenetur ut, voluptates! Aliquid beatae eos illo itaque libero quasi repellendus similique, totam!
    </div>
    <div>Dolores eos laudantium non praesentium provident. Assumenda at consectetur culpa doloremque enim fugiat illo,
        illum libero minus mollitia nemo nesciunt nisi obcaecati, odit officiis pariatur quas ratione rerum vero
        voluptate?
    </div>
    <div>Culpa deleniti laudantium magni omnis perferendis provident quibusdam, recusandae sequi sint ullam. Ad aliquam
        autem, beatae corporis cupiditate dicta, dolore error id laudantium maxime quo sapiente sequi similique velit,
        voluptas?
    </div>
    <div>Aliquam aliquid animi atque debitis dicta dolor eveniet id libero molestiae molestias mollitia necessitatibus
        nihil perspiciatis placeat quam quis ratione reprehenderit sed sequi sit, soluta, sunt suscipit, tenetur velit
        voluptatem.
    </div>
    <div>Delectus excepturi illo ipsam libero modi nesciunt non nostrum temporibus! Ab at atque delectus doloremque eius
        eos eveniet ex incidunt itaque nihil perspiciatis quidem, quisquam rerum saepe tenetur vel voluptatibus.
    </div>
</div>

</body>
</html>